<!-- 文章归档页面 -->
<template>
  <div ref="container" class="container">
    <div class="content-container">
      <!--  左-->
      <div class="left-side" v-if="device == 'desktop'">
        <h1 class="left-side-title">
          <img :src="randomImageSrc" />
          归档
        </h1>
        <ul class="tab-list">
          <li
            v-for="(tab, index) in tabs"
            :key="index"
            class="list-tab"
            :class="{ 'tab-active': tabActive === index }"
            @click="tabClick(index, tab)"
          >
            {{ tab.date }}
          </li>
        </ul>
        <el-button
          type="text"
          :disabled="tabCurrent === 1"
          @click="tabPageChange(-1)"
        >
          <el-icon><ArrowLeft /></el-icon>
        </el-button>
        <el-button
          type="text"
          :disabled="tabPages === tabCurrent"
          @click="tabPageChange(1)"
        >
          <el-icon><ArrowRight /></el-icon>
        </el-button>
      </div>
      <!-- 右 -->
      <div class="right-side">
        <el-timeline>
          <el-timeline-item
            id="first"
            color="#1d8dff"
            icon="MoreFilled"
            size="large"
            :timestamp="'# 当前月份一共' + total + '篇文章！'"
            placement="top"
          />
          <transition-group name="fade">
            <el-timeline-item
              v-for="(item, index) in artList"
              :key="index"
              color="#0bbd87"
              :timestamp="item.date"
              placement="top"
              :type="primary"
            >
              <el-card shadow="hover">
                <router-link :to="'/article/' + item.id" class="title">{{
                  item.title
                }}</router-link>
                <div class="content">
                  <p class="abstract multi-ellipsis--l3">
                    {{ item.summary }}
                  </p>
                  <div class="wrap-img">
                    <img :src="item.cover" />
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
          </transition-group>
        </el-timeline>
        <!-- 分页 -->
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="size"
          :current-page="current"
          :total="total"
          :hide-on-single-page="true"
          @current-change="currentChange"
        />
      </div>

      <!-- 移动tab菜单图标 -->
      <el-icon
        v-if="device !== 'desktop'"
        class="menu-svg"
        @click="drawer = !drawer"
        ><Menu
      /></el-icon>
      <!-- 移动tab菜单抽屉 -->
      <el-drawer
        v-if="device !== 'desktop'"
        v-model="drawer"
        :before-close="handleClose"
        :show-close="false"
        size="40%"
      >
        <template #header><h2>归档</h2> </template>
        <ul class="menu-list">
          <li
            v-for="(tab, index) in tabs"
            :key="index"
            class="list-tab"
            :class="{ 'tab-active': tabActive === index }"
            @click="tabClick(index, tab)"
          >
            {{ tab.date }}
          </li>
        </ul>
      </el-drawer>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  pageArchives as apiPageArchives,
  pagePublishedArticle,
} from "/@/api/article/article";
import { formatPast, formatDate } from "/@/utils/format/format-time";
import { MoreFilled } from "@element-plus/icons-vue";
import { useGetters } from "/@/store/getters";

const useGettersPinia = useGetters();

const device = computed(() => useGettersPinia.device);

const drawer = ref(false);
const tabActive = ref(0);
const loading = ref(true);
const tabs = ref([]);
const tabSize = ref(12); //归档
const tabCurrent = ref(1);
const tabPages = ref(1);
const yearMonth = ref("");
const current = ref(1);
const size = ref(5); // 文章
const total = ref(0);
const artList = ref([]);
const images = ref([
  "",
  "",
  "",
]);
const currentImageIndex = ref(0);

const randomImageSrc = computed(() => images.value[currentImageIndex.value]);

// Mounted hook
onMounted(() => {
  changeImage();
  pageArchives();
});

const changeImage = () => {
  // 生成一个随机的索引值
  const newIndex = Math.floor(Math.random() * images.value.length);
  currentImageIndex.value = newIndex;
};

// Methods
const pageArchives = async () => {
  loading.value = true;
  try {
    const res = await apiPageArchives({
      size: tabSize.value,
      current: tabCurrent.value,
    });
    const records = res.records; // 有两个数据yearMonth articleCount
    records.forEach((ele) => {
      const arr = ele.yearMonth.split("-");
      ele.date = arr[0] + "年" + arr[1] + "月";
    });

    tabs.value = records;
    tabPages.value = res.pages;
    tabClick(0, tabs.value[0]); //点击
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
};

// 文章
const pageArticle = async () => {
  loading.value = true;
  try {
    const res = await pagePublishedArticle({
      current: current.value,
      size: size.value,
      yearMonth: yearMonth.value,
    });
    const records = res.records;
    records.forEach((ele) => {
      ele.date = formatDate(
        new Date(ele.publishTime.replace(/-/g, "/")), // 解决ios 日期NAN问题
        "YYYY-mm-dd HH:MM"
      );
    });

    artList.value = records;
    total.value = res.total;
    loading.value = false;
  } catch (error) {
    console.error(error);
    loading.value = false;
  }
};

// Event Handlers
const currentChange = (newCurrent) => {
  current.value = newCurrent;
  pageArticle();
};

// 归档翻页
const tabPageChange = (val) => {
  tabCurrent.value += val;
  drawer.value = false;
  pageArchives();
};

const tabClick = (index, tab) => {
  tabActive.value = index;
  yearMonth.value = tab.yearMonth;
  current.value = 1;
  drawer.value = false;
  pageArticle(); //显示文章
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;

  @media screen and (max-width: 960px) {
    background: #fff;
    margin: 0 auto;
    width: 90%;
  }

  .content-container {
    margin: 0 auto;
    margin-top: 50px;
    box-sizing: border-box;
    display: flex;

    @media screen and (max-width: 960px) {
      margin-top: 5px;
    }

    // 左
    .left-side {
      position: fixed;
      top: 110px;
      left: 200px;
      z-index: 999;
      padding: 0;
      padding-top: 20px;
      padding-bottom: 5px;
      background: #fff;
      text-align: center;
      min-width: 150px;

      .left-side-title {
        margin-left: -10px;
        margin-top: -15px;
        color: #303133;
      }

      .tab-list {
        margin-top: 15px;
        font-size: 15px;
        text-align: center;
        color: #909090;

        .list-tab {
          list-style: none;
          position: relative;
          padding: 5px;
          border-radius: 3px;
          cursor: pointer;
          margin: 5px 20px;
          margin-top: 0;

          &:hover {
            color: #007fff;
            background: #f4f5f5;
          }
        }

        .tab-active {
          color: #fff;
          background: #007fff;

          &:hover {
            color: #fff;
            background: #007fff;
          }
        }
      }

      .el-icon {
        font-weight: 700;
      }
    }

    //右
    .right-side {
      margin-left: 400px;
      margin-right: 190px;
      flex: 1;

      //过渡
      .fade-enter-active,
      .fade-leave-active {
        transition: opacity 0.3s; /* 调整过渡持续时间 */
      }
      .fade-enter,
      .fade-leave-to {
        opacity: 0;
      }

      .el-card {
        position: relative;

        @media screen and (max-width: 922px) {
          width: 70vw;
        }

        .title {
          margin: 0;
          font-size: 14px;
          font-weight: 700;
          color: #2f2f2f;

          &:hover {
            text-decoration: underline;
          }
        }

        .content {
          display: flex;

          .abstract {
            flex: 1;
            margin: 0;
            margin-top: 8px;
            padding-right: 200px;
            line-height: 20px;
            color: #999;

            @media screen and (max-width: 960px) {
              padding-right: 0;
            }
          }

          .wrap-img {
            position: absolute;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            width: 150px;
            height: 70px;
            border-radius: 4px;
            border: 1px solid #f3f7fa;
            overflow: hidden;

            @media screen and (max-width: 960px) {
              display: none;
            }

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .el-pagination {
        text-align: center;
      }

      @media screen and (max-width: 960px) {
        margin-left: 0;
      }

      #first {
        width: 100%;
        height: 70px;

        /deep/ .el-timeline-item__timestamp {
          color: #303133;
          font-size: 16px;
          font-weight: bold;
        }

        /deep/ .el-timeline-item__node--large {
          left: -8px;
          width: 23px;
          height: 23px;
        }
      }

      @media screen and (max-width: 960px) {
        /deep/ .el-timeline {
          padding: 15px;
        }
      }

      // 左边连线的样式
      @media screen and (min-width: 960px) {
        /deep/ .el-timeline-item__tail {
          border-left: 2px solid #c0c4cc;
        }
      }

      // 右边日期的样式
      @media screen and (min-width: 960px) {
        /deep/ .el-timeline-item__timestamp {
          color: #444;
          font-weight: 700;
        }
      }
    }
  }

  // 移动端tab menu图标
  .menu-svg {
    position: fixed;
    right: 20px;
    bottom: 20px;
    fill: #333;
    width: 25px;
    height: 25px;
  }

  // 移动端tab
  .menu-list {
    margin: 0;
    padding: 0;
    font-size: 15px;
    text-align: center;
    color: #909090;

    @media screen and (min-width: 922px) {
      display: none;
    }

    .list-tab {
      list-style: none;
      position: relative;
      margin: 0 auto;
      padding: 5px;
      border-radius: 3px;
      cursor: pointer;
      margin-top: 5px;
      width: 100px;

      &:hover {
        color: #007fff;
        background: #f4f5f5;
      }
    }

    .tab-active {
      color: #fff;
      background: #007fff;

      &:hover {
        color: #fff;
        background: #007fff;
      }
    }

    .page-wraper {
      text-align: center;
    }
  }

  /deep/ .el-drawer__body > * {
    text-align: center;
  }
}
</style>
